<template>
    <div class="main main_bg" :style="$store.state.isApp?'paddingTop:.2rem':'paddingTop:1.1rem'">
      <gltitle :titleSize="titleSize" :is_mt="is_mt" v-if="!$store.state.isApp" ></gltitle>
      <div class="container">
        <div class="boxshadow">
          <div class="box db tac">
            <div class="flex">
              <div class="name">{{$t('staff.doc37')}}（USDT）</div>
              <div class="s">{{withdrawAmountPending}}</div>
            </div>
            <div class="flex">
              <div class="name">{{$t('staff.doc38')}}（USDT）</div>
              <div class="s">{{withdrawAmountSuccess}}</div>
            </div>
          </div>
        </div>
        <div class="boxshadow">
          <div class="select wrap bet">
            <div class="time db" @click="time_show = true">
              <div class="flex">{{date}}</div><van-icon name="arrow-down" />
            </div>
            <div class="val db" @click="status_show = true">
              <div class="flex"><input type="text" :placeholder="$t('staff.doc39')" v-model="status_text" readonly></div><van-icon name="arrow-down" />
            </div>
          </div>

          <van-list
            v-model="loading"
            :finished="finished"
            :finished-text="$t('load.no_more')"
            :loading-text="$t('load.loading')"
            @load="onLoad"
            v-show="!emptyShow"
            @change="handleChangeSelect"
            :offset="5"
            class="listContent"
          >
          <div class="list">
            <ul class="db" v-for="(item,k) in dataList" :key="k">
              <li class="flex">
                <div class="cid">ID:{{item.userId}}</div>
                <div class="price c-999">
                  {{$t('staff.doc40')}}：{{item.amount}} {{item.coinName}}
                  <span v-if="item.coinName != 'USDT'">≈{{item.usdtAmount}} USDT</span>
                </div>
              </li>
              <li class="str tar">
                <div class="time">{{item.date}}</div>
                <div class="sel c-red" v-if="item.auditStatusCode == 2">{{item.auditStatus}}</div>
                <div class="sel c-999" v-else>{{item.auditStatus}}</div>
              </li>
            </ul>
          </div>
          </van-list>
        </div>

        <div class="rel" v-if="dataList.length == 0">
          <div class="empty">
            <img src="../../assets/images/none2.png" alt="">
            <span class="c-999">{{$t('toast.no_data')}}</span>
          </div>
        </div>


      </div>


      <van-popup v-model="time_show" position="bottom">

        <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          title=""
          item-height=".8rem"
          :max-date="maxDate"
          :columns-order="['year', 'month', 'day']"
          :formatter="formatter"
          @confirm="timeConf"
          :cancel-button-text="$t('word.cancle')"
          :confirm-button-text="$t('word.ok')"
        />
      </van-popup>

      <van-popup v-model="status_show" position="bottom" style="border-radius: .22rem .22rem 0 0">
        <div class="popbox">
          <div class="top rel">
            {{$t('staff.doc41')}}
            <div class="abs" @click="status_show = false"><van-icon name="cross" /></div>
          </div>
          <ul class="a_list bg-fff">
            <li class="db" :class="{on:auditStatus === item.id}" v-for="(item,k) in status_data" :key="k" @click="checkbox(item.id,item.name)">
              <div class="flex">{{item.name}}</div>
              <div class="str"><span class="ico"></span></div>
            </li>
          </ul>
        </div>

      </van-popup>
    </div>
</template>
<script>


  export default {
  data(){
    return {
      it:0,
      if_check:false,
      titleSize:this.$t('staff.doc4'),
      is_mt:true,
      // titleRight: "<img src=" + require("../../public/images/ico_10_10.png") + ">"
      datainfo:'',
      currentDate: new Date(),
      maxDate:new Date(),
      time_show:false,
      status_show:false,
      date:'',
      dataList:[],
      totalPage: "",
      pageSize: 10,
      loading: false,
      finished: false,
      refreshing: false,
      emptyShow:false,
      withdrawAmountPending:'0',
      withdrawAmountSuccess:'0',
      auditStatus:'',
      status_data:[{name:this.$t('staff.doc39'),id:''},{name:this.$tc('staff.doc42',0),id:'1'},{name:this.$tc('staff.doc42',1),id:'0'},{name:this.$tc('staff.doc42',2),id:'2'}],
      status_text:this.$t('staff.doc39')

    }
  },
    watch: {
      dataList(newValue, oldValue) {
        if (newValue.length == 0) {
          this.isHasList = false;
          this.emptyShow = true
        }else{
          this.isHasList = true;
          this.emptyShow = false
        }
      },
    },
    created() {
      this.date = this.$moment(this.currentDate).format("YYYY-MM");
    },
    mounted() {


    },
    methods: {
      checkbox(id,name){
        this.status_text = name
        this.auditStatus = id
        this.status_show = false
        this.onRefresh()
      },
      timeConf(value) {
        this.time_show = false;
        this.date = this.$moment(value).format("YYYY-MM");
        this.onRefresh()
      },
      formatter(type, val) {
        if (type === 'year') {
          return `${val}` + this.$t('model.year');
        } else if (type === 'month') {
          return `${val}` + this.$t('model.month');
        } else if (type === 'day') {
          return `${val}` + this.$t('model.day');
        }
        return val;
      },
      onRefresh() {
        this.finished = false
        this.loading = true
        this.dataList = []
        this.pageIndex = 1
        this.pageSize = 10
        this.lastId = ''

        this.onLoad();
      },
      onLoad() {
        this.datalists();
      },
      handleChangeSelect() {
        this.lastId = ''
        this.dataList = [];
        this.totalPage = "";
        this.page = 0;
        this.datalists();
      },

      datalists(){


        let data = {
          date:this.date,
          lastId: this.lastId,
          auditStatus:this.auditStatus,
          pageSize:this.pageSize
        };

        this.$post(this.URL.staff.withdraw, {
          ...data,

        }).then((res) => {
          if (res.code == 0) {
            this.withdrawAmountPending = res.data.withdrawAmountPending
            this.withdrawAmountSuccess = res.data.withdrawAmountSuccess
            this.loading = false;
            if (0 != res.code) {
              this.finished = true;

              this.page -= 1;
              this.lastId = 0;
              return;
            }
            if(null == res.data){

              this.finished = true;
              return;
            }
            if (!this.common.isArray(res.data.list)) {

              this.finished = true;
              return;
            }


            this.totalAmount = res.data.totalAmount;
            this.totalRecordCount = res.data.page.count;
            this.totalPage = res.data.page.totalPage;
            this.pageIndex = res.data.page.index;
            let initData = res.data.list;

            // 最后一条数据的id，用于下一次请求，服务器给的新分页请求方法
            let endItem = initData[initData.length -1];

            if(endItem != undefined){
              this.lastId = endItem.id;
            }


            if (this.isEmptyList) {
              this.dataList = [];
            }

            this.dataList.push(...initData);
            this.isEmptyList = false;

            if (res.data.list.length < this.pageSize) {
              this.finished = true;
              return;
            }
          } else {
            this.$toast(res.message);
          }
        });
      },


    },


}

</script>


<style lang="less" scoped>
  #app {
    .popbox {
      .top {
        text-align: center;
        font-size: .34rem;
        font-weight: 400;
        color: #14191f;
        line-height: 1rem;
        border-bottom: .01rem solid #eee;
        .abs {
          right:.3rem;top:0;
          i {
            font-size: .32rem;
            color: #999;
          }
        }
      }
    }
    .container {
      padding: 0 .2rem;
      .boxshadow {
        overflow: hidden;
      }


      .select {
        padding: .26rem .26rem .3rem .26rem;
        .db {
          height: .68rem;
          background: #ffffff;
          border: .02rem solid #cccccc;
          border-radius: .1rem;
          padding: 0 .18rem;
          font-size: .26rem;
          i {
            font-size: .26rem;
            color: #999;
          }
        }
        .time {
          width: 2.56rem;
        }
        .val {
          width: 3.8rem;
          input {
            border:0;
            width: 100%;
          }
          input::placeholder {
            color: rgba(206, 206, 206, 1) !important;
          }
        }
      }
      .list {
        padding: 0 .26rem;
        ul {
          border-top:.01rem solid #eee;
          height: 1.26rem;
          font-size: .26rem;
          .cid {
            font-size: .32rem;
          }
          .price {
            font-size: .24rem;
            line-height: .3rem;
            span {
              display: block;
            }
          }
          .time {
            color: #666666;
          }
        }
      }
      .box {
        height: 1.7rem;
        background: linear-gradient(-55deg,#063dc3 0%, #2294ed 100%);
        border-radius: .16rem;
        color: #fff;
        font-size: .26rem;
        .s {
          font-size: .34rem;
          font-weight: 500;
          color: #ffdfa1;
        }
        .flex {
          position: relative;
        }
        .flex:after {
          content:'';
          display: block;
          width: .02rem;
          height: .8rem;
          opacity: 0.2;
          background: #ededed;
          position: absolute;top:50%;
          margin-top: -.4rem;
        }
      }
    }
  }
</style>
